<template>
  <div class="h-full flex dt-page w-full p-3 flex-col">
    <div class="flex p-3 bg-white border border-dashed gap-3">
      <AButton type="primary" @click="setProps({ loading: !loading });">设置table属性</AButton>
      <AButton type="primary" @click="clearSelectedRowKeys">清空选中的数据</AButton>
      <AButton type="primary" @click="printSelectRows()">获取选中的数据</AButton>
      <AButton type="primary" @click="printSelectRowKeys()">获取选中的数据keys</AButton>
      <AButton type="primary" @click="setSelectKeys()">设置选中的数据keys</AButton>
      <AButton type="primary" @click="printGetColumns()">获取列头信息</AButton>
      <AButton type="primary" @click="printCacheColumns()">获取有效列头信息</AButton>
      <AButton type="primary" @click="ssetColumns()">设置列头信息</AButton>
      <AButton type="primary" @click="setSingleColumn()">设置第二列信息</AButton>
      <AButton type="primary" @click="printRowByKey()">获取第四行数据</AButton>
      <AButton type="primary" @click="changeRowByKey()">改变第四行数据</AButton>
      <AButton type="primary" @click="getPages()">获取分页数据</AButton>
      <AButton type="primary" @click="refresh();">刷新</AButton>
    </div>

    <div class="flex-1 p-3 bg-white">
      <DtTable @register="registerTable"></DtTable>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { useTable, useRouteReuseStore } from '@zm-pkg/ui'

const tabStore = useRouteReuseStore()
const router = useRouter()

const loading = ref(true)
const dataSource = ref([])

setTimeout(() => {
  for(let i = 0; i < 1500; i++) {
    dataSource.value.push({
      id: i + 1,
      baseColumn1: Math.round(Math.random()),
      baseColumn2: Math.ceil(Math.random() * 2),
      baseColumn3: Math.ceil(Math.random() * 400000),
      baseColumn4: Math.round(Math.random()),
      baseColumn5: (Math.round(Math.random() * 100)) / 100,
      baseColumn6: null
    })
  }

  loading.value = false
}, 200);

const [registerTable, {
  setProps,
  clearSelectedRowKeys,
  getSelectRows,
  getSelectedRowKeys,
  setSelectedRowKeys,
  getColumns,
  getCacheColumns,
  setColumns,
  setColumnsByDataIndex,
  findTableDataRecord,
  updateTableDataRecord,
  getPagination
}] = useTable({
  loading,
  toolbar: [],
  columns: [
    { title: '列1', dataIndex: 'baseColumn1' },
    { title: '列2', dataIndex: 'baseColumn2' },
    { title: '列3', dataIndex: 'baseColumn3' },
    { title: '列4', dataIndex: 'baseColumn4' },
    { title: '列5', dataIndex: 'baseColumn5' },
  ],
  dataSource
})

function printSelectRows() { console.log(getSelectRows()) }
function printSelectRowKeys() { console.log(getSelectedRowKeys()) }
function setSelectKeys() { setSelectedRowKeys([1,2,3]) }
function printGetColumns() { console.log(getColumns()) }
function printCacheColumns() { console.log(getCacheColumns()) }
function ssetColumns() { setColumns([
  { title: '列1', dataIndex: 'baseColumn1' },
  { title: '列2', dataIndex: 'baseColumn2' },
  { title: '列3', dataIndex: 'baseColumn3' },
]) }

function printRowByKey() { console.log(findTableDataRecord(4)) }
function changeRowByKey() { updateTableDataRecord(4, {
  baseColumn1: 'xxxxx'
}) }
function getPages() { console.log(getPagination()) }

function setSingleColumn() {
  setColumnsByDataIndex('baseColumn2', {
    render: { number: '0.2-2' }
  })
}


function refresh() { tabStore.refreshPage(router) }
</script>

<style lang="less" scoped>
:deep(.dt-table){
  height: 100%;
}
</style>